<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 500px;
      height: 600px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <input type="text">
  <button>发送</button>

  <script>
    /*
      WebSocket 是什么？
      WebSocket 是一种网络传输协议，可以在单个 TCP 连接上进行全双工通信。这意味着客户端和服务器之间可以实时、双向地交换数据，而不需要像 HTTP 那样每次请求都重新建立连接。

      特点:
        1. 双向通信(实时性)
        2. 长连接
    */ 


    // 前端可以直接使用WebSocket
    const name = prompt("请输入你的名字");
    const id = new Date().getTime();


    var ws = new WebSocket("ws://127.0.0.1:8080");

    // 连接成功的函数
    ws.onopen = function(evt) { 
      console.log("Connection open ..."); 
      // 前端给后端发送内容
      // ws.send("Hello WebSockets!");
    };

    // 前端接受到后端发来的信息的函数
    ws.onmessage = function(evt) {
      // console.log( "Received Message: " + evt.data);
      // 关闭连接
      // ws.close();
      // document.querySelector("#box").innerHTML += 
      // `<p>${evt.data}</p>`

      const obj = JSON.parse(evt.data);
      if (obj.id === id) {
        document.querySelector("#box").innerHTML += 
      `<p style="float: right">${obj.name}说：${obj.message}</p>`
      } else {
        document.querySelector("#box").innerHTML += 
      `<p style="float: left">${obj.name}说：${obj.message}</p>`
      }
      
    };

    // 连接断开的函数
    ws.onclose = function(evt) {
      console.log("Connection closed.");
    };  


    // document.querySelector("button").onclick = () => {
    //   // 将input的内容发送给后端
    //   ws.send(name + "说： " + document.querySelector("input").value);
    //   document.querySelector("input").value = ""
    // }

    document.querySelector("input").onkeyup = (e) => {
      if (e.key === "Enter") {
        // ws.send(name + "说： " + document.querySelector("input").value);

        // ws只能发字符串
        ws.send(JSON.stringify({
          name: name,
          id: id,
          message: document.querySelector("input").value
        }))

        document.querySelector("input").value = ""
      }
    }
  </script>
</body>
</html>